<template>
  <!-- 批量设置运费模板组件 -->
  <div v-loading="loading" element-loading-text="加载中">
    <el-form ref="stockForm" :model="deliveryTemplateForm" label-width="140px" class="mar-l-20 mar-r-30">
      <el-form-item label="零售运费模板类型：" prop="postFeeType">
        <el-select v-model="deliveryTemplateForm.postFeeType" clearable>
          <el-option v-for="(item, index) in postFeeTypeList" :key="index" :label="item.value" :value="item.key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="零售运费模板：" prop="deliveryTemplateId">
        <el-select v-model="deliveryTemplateForm.deliveryTemplateId" clearable>
          <el-option v-for="(item, index) in deliveryTemplateList" :key="index" :label="item.templateName" :value="item.templateId"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="分销运费模板类型：" prop="distributePostFeeType">
        <el-select v-model="deliveryTemplateForm.distributePostFeeType" clearable>
          <el-option v-for="(item, index) in postFeeTypeList" :key="index" :label="item.value" :value="item.key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分销运费模板：" prop="distributeDeliveryTemplateId">
        <el-select v-model="deliveryTemplateForm.distributeDeliveryTemplateId" clearable>
          <el-option v-for="(item, index) in deliveryTemplateList" :key="index" :label="item.templateName" :value="item.templateId"></el-option>
        </el-select>
      </el-form-item>
      <div class="font-red">（ 提示：所选商品中的单规格商品，SKU级模板不生效 ）</div>
    </el-form>

    <!-- 底部按钮 -->
    <div slot="footer" class="dialog-footer mar-t-30">
      <el-button @click="doClose">取消</el-button>
      <el-button type="primary" @click="doConfirm">确定</el-button>
    </div>

  </div>  
</template>

<script>
  import { listTemplate } from '@/api/sell/delivery-template'
  import { batchSetDeliveryTemplate } from '@/api/goods/goods'

  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      // 商品ids
      goodsIds: {
        type: Array,
        default() {
          return []
        }
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.init()
        }
      }
    },
    data() {
      return {
        // 表单
        deliveryTemplateForm: {
          postFeeType: '',
          deliveryTemplateId: '',
          distributePostFeeType: '',
          distributeDeliveryTemplateId: ''
        },
        // 模板类型
        postFeeTypeList: [
          { key: '11', value: '全部设置为货号级模板' },
          { key: '12', value: '全部设置为SKU级模板' }
        ],
        // 模板列表
        deliveryTemplateList: [],
        loading: false
      }
    },
    created() {
      this.init()
    },
    methods: {
      // 初始化
      init() {
        this.loading = true
        const originData = this.$options.data()
        this.deliveryTemplateForm = originData.deliveryTemplateForm
        listTemplate({ enterpriseId: this.getEnterpriseId(), templateType: 1 }).then(response => {
          this.loading = false
          this.deliveryTemplateList = response.data
        })
      },
      // 关闭事件
      doClose() {
        this.$emit('callback', this.refreshFlag)
      },
      // 确定事件
      doConfirm() {
        const form = this.deliveryTemplateForm
        if ((!form.postFeeType && form.deliveryTemplateId) || (form.postFeeType && !form.deliveryTemplateId)) {
          this.$message.error('零售运费模板与类型必须都选择')
          return
        }
        if ((!form.distributePostFeeType && form.distributeDeliveryTemplateId) || (form.distributePostFeeType && !form.distributeDeliveryTemplateId)) {
          this.$message.error('分销运费模板与类型必须都选择')
          return
        }
        if (!form.postFeeType && !form.deliveryTemplateId && !form.distributePostFeeType && !form.distributeDeliveryTemplateId) {
          this.$message.error('请选择')
          return
        }
        this.loading = true
        form.goodsIds = this.goodsIds
        batchSetDeliveryTemplate(form).then(response => {
          this.loading = false
          if (response.isError) return
          this.$emit('callback', true)
          this.$message({ type: 'success', message: '修改成功' })
        })
      }
    }
  }
</script>

<style lang="less" scoped>

</style>